<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* div {
				width: 200px;
				height: 200px;
				background-color: pink;
				padding-left: 30px;
				padding-top: 20px;
			} */
			.di1 {
				width: 400px;
				height: 400px;
				background-color: goldenrod;
				margin-top: 40px;
				border: 1px solid transparent;/* 添加之后,子元素才有效 */
			}
			.di2 {
				width: 200px;
				height: 200px;
				background-color: darkkhaki;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 border: 粗细 样式 颜色
		 solid实线
		 dashed虚线
		 dotted点线
		 
		 表格的边框：border-collapse：collapse相邻边框合并在一起
		 
		 padding：内边距
		 margin：外边距
		 一个值代表上下左右内边距
		 两个值代表上下和左右
		 三个值是上和左右和下
		 四个值是上右下左
		 没有设置宽，则padding-left或者padding-right不会撑开
		 
		 margin：外边距
		 auto表示居中
		 margin： 0 auto居中
		 
		 
		 嵌套块级元素塌陷：设置父元素margin，设置子元素的margin没有效果
		 解决方式是给父元素设置border、内边距、overflow：hidden
		 
		 清除内外边距：* {padding: 0; margin: 0;}
		 
		 
		 
		 -->
		 <!-- <div>
			 jdiushfubchsduugduennncksmcos
			 到今年此伍尔夫诶发你和抚慰dichiwuh
		 </div> -->
		 <div class="di1">
			 <div class="di2"></div>
		 </div>
	</body>
</html>
